// src/APP.vue

<template>
<div id="computed-basics">
  <p>姓：{{ name.firstName }}</p>
  <p>名：{{ name.lastName }}</p>
  <p>姓名：{{ fullName }}</p>
</div>
</template>

<script lang="ts">
import { reactive, defineComponent, computed } from 'vue'
export default defineComponent({
  name: 'APP',
  setup() {
    const name = reactive({
      firstName: '',
      lastName: ''
    })

    const fullName = computed({
      get: () =>name.firstName + ' ' + name.lastName,
      set: (newValue) => {
        const names = newValue.split(' ')
        name.firstName = names[0]
        name.lastName= names[names.length - 1]
      }
    })

    return {
      name,
      fullName
    }
  }
})
</script>